<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>${activity.title}</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- welcome2 css -->
<link style="text/css" rel="stylesheet" href="css/rwdmenu_main.css" />

<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">
<!-- xmas -->
<link rel="stylesheet" href="css/xmas.css" media="screen">

<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<script src="js/modernizr.custom.js"></script>
<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body class="welcomebody">

	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12">
							<div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li><a href="register">註冊</a></li>
								<li><a href="login">登入</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>

			<div class="rslidesWrap">
				<div class="rslidesWord">
					<div class="rslidesWordTitle">
						<h2>${activity.title}</h2><br />
						${activity.content}
					</div>
				</div>
				<ul class="rslides">
				  <li><img src="img/maxbg1.jpg" alt=""></li>
				  <li><img src="img/maxbg2.jpg" alt=""></li>
				  <li><img src="img/maxbg3.jpg" alt=""></li>
				  <li><img src="img/maxbg4.jpg" alt=""></li>
				</ul>				
			</div>
			<div class="hotissue">
				<div class="container">
					
					<div class="grid_12">
						<header class="sectionHeader">
							<h2><i class="fa fa-sun-o"></i> 來自大家的 祝福 暖心 <i class="fa fa-sun-o"></i></h2>		
						</header>
					</div>			
					<div class="prefix_3 grid_6 suffix_3">
						<a href="showActivity?id=${activity.id}" class="btn_pop">
							<span>我也要製作卡片</span>
                    	</a>					
					</div>
				</div>
				<div class="hotissue2">
					<div>
						<div class="container">

							<div class="grid_12">
								<header class="sectionHeader">
									<h2>耶誕活動 排名</h2>							
								</header>
							</div>
							<c:forEach items="${memberList}" var="member">
							<div class="grid_2">
								<div class="hotMemberImg">
									<a href="memberCard?id=${member.memberNO}">
										<img src="${member.photoPath}" alt="${member.name}">
									</a>
								</div>
								<div class="hotMemberInfo">
									<h3>${member.name}</h3>
									<span><i class="fa fa-tree"></i> ${member.cardCount}</span>
								</div>
							</div>							
							</c:forEach>
						</div>			
					</div>	
				</div><!-- hotissue2 -->
				<div class="inspireList xmas worksCourseBox">
					<ul id="a" class="container">
					<c:forEach items="${cardList}" var="card">
						<li class="grid_3 item1">
							<div class="courseCard">
								<div class="inspireHover">
									<a href="showCard?id=${card.id}" class="full_btn"></a>
									<div class="made">							
										<i class="fa fa-sun-o"></i> ${card.title}
									</div>
								</div>
								<a href="showCard?id=${card.id}" class="courseBoxImg resource">
									<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${card.imagePath}" class="item1Img">
								</a> 
							</div>
						</li>
					</c:forEach>
						
									
					</ul>
				</div>

			</div>
			<div class="page clearfix">
				<ul>
					<c:forEach items="${page.pagerList}" var="pager">
						<li class="${pager.indexClass}"><a href="${pager.url}">${pager.index}</a></li>
					</c:forEach>	
	            </ul>
	        </div><!-- page -->
			<footer class="footerbwrap">
				<div class="container">
					<div class="grid_12">
						<span>©2014 PROACTIVE </span> 
						<a href="https://www.facebook.com/pages/Proactive/579983748802096"><img src="images/icon_fb.png" alt="proactive facebook粉絲頁"></a>
						<a href="https://www.youtube.com/channel/UC4SGQg8Qjj5YcgOmopSmk0g"><img src="images/icon_youtube.png" alt="proactive egroup youtube頻道"></a>
					</div>
				</div>
			</footer>
	    </div><!-- content -->

		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
				<li class="menumember"><a href="register">註冊</a></li>
				<li class="menumember"><a href="login">登入</a></li>
			</ul>
		</nav>
	</div><!-- page -->
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>	
	<script src="js/ourjquery.js"></script>	
	<script type="text/javascript" src="js/rwdmenu_main.js"></script>
	<!-- tab -->
  	<script src="js/jquery.hashchange.min.js"></script>
 	<script src="js/jquery.easytabs.min.js"></script>
	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<!-- Card -->
	<script type="text/javascript" src="js/masonry.pkgd.min.js"></script>	
	<script type="text/javascript" src="js/imagesloaded.pkgd.min.js"></script>
	<script type="text/javascript" src="js/scrollpagination.js"></script>
	

  	<script src="js/responsiveslides.min.js"></script>
  	
  	<script>
	  $(function() {
			$('#tab-container').easytabs();
			$('nav#menu').mmenu();
			$(".rslides").responsiveSlides({
			  speed: 2000,            // Integer: Speed of the transition, in milliseconds
			  timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
			});	    
			$('#a').imagesLoaded(function () {
		        $('#a').masonry({        
		            itemSelector: '.item1',
	        		singleMode: true,
		            animate:true
		        });
			});
			$('#a').scrollPagination({
		        'contentPage': 'GetDynamicGrid.ashx', // the page where you are searching for results
		        'contentData': {  }, // you can pass the children().size() to know where is the pagination
		        'scrollTarget': $(window), // who gonna scroll? in this example, the full window
		        'heightOffset': 10, // how many pixels before reaching end of the page would loading start? positives numbers only please
		        'beforeLoad': function () { // before load, some function, maybe display a preloader div

		        },
		        'afterLoad': function (elementsLoaded) { // after loading, some function to animate results and hide a preloader div

		            var $newElems = $(elementsLoaded).css({ opacity: 0 });
		            $newElems.imagesLoaded(function () {
		                // show elems now they're ready
		                $newElems.animate({ opacity: 1 });
		                $('#a').masonry('appended', $newElems, true);
		            });
		        }
			});
		  });
	</script>
	
</body>
</html>